<%--
  Created by IntelliJ IDEA.
  User: 张帆
  Date: 2022/6/28
  Time: 14:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>列表页面</title>
    <style>
        div {
            margin-top: 50px;
            background-color: #E7DED9;
            text-align: center;
            width: 100%;
        }
    </style>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
</head>
<body>
    <h1>欢迎${user.username}  &nbsp;&nbsp;<a href="login.jsp">退出</a></h1><br>
    <table align="center" width="90%" border="1" style="text-align: center;font-size: 20px;">
        <tr style="color: yellow">
            <th>编号</th>
            <th>姓名</th>
            <th>生日</th>
            <th>性别</th>
            <th>职业</th>
            <th>住所</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        <div class="row ${pageBean.total<=0?"div1":"" }">
            <c:if test="${pageBean.total<=0 }">没有数据！！！</c:if>
            <c:forEach items="${pageBean.list}" var="e" varStatus="i">
                <tr>
                    <th>${e.id}</th>
                    <th>${e.name}</th>
                    <th>${e.birthday}</th>
                    <th>${e.gender}</th>
                    <th>${e.career}</th>
                    <th>${e.address}</th>
                    <th>${e.mobile}</th>
                    <th>
                        &nbsp;<button type="button" id="btn1"><a href="profileservlet?method=detailProfile&id=${e.id}">明细</a></button>&nbsp;&nbsp;
                        <button type="button" id="btn2"><a href="profileservlet?method=loadUpdateInfoProfile&id=${e.id}">修改</a></button>&nbsp;
                    </th>
                </tr>
            </c:forEach>
        </div>
        <c:if test="${pageBean.total>0 }">
            <c:if test="${pageBean.pageNum<=1 }">
                <a class="disabled" aria-hidden="true">上一页</a>
            </c:if>
            <c:if test="${pageBean.pageNum>1 }">
                <a href="${pageContext.request.contextPath}/profileservlet?method=listProfile&pageNum=${pageBean.pageNum-1}&pageSize=${pageBean.pageSize}" aria-label="Previous"><span aria-hidden="true">上一页</span></a>
            </c:if>
            <c:forEach var="pn" begin="${pageBean.navigateFirstPage}" end="${pageBean.navigateLastPage}" step="1">
                <c:if test="${pn==pageBean.pageNum }">
                    <a href="#" style="background-color: yellow">${pn}<span class="sr-only"></span></a>
                </c:if>
                <c:if test="${pn!=pageBean.pageNum }">
                    <a href="${pageContext.request.contextPath }/profileservlet?method=listProfile&pageNum=${pn}&pageSize=${pageBean.pageSize}">${pn}</a>
                </c:if>
            </c:forEach>
            <c:if test="${pageBean.pageNum==pageBean.pages }">
                <a class="disabled" aria-hidden="true">下一页</a>
            </c:if>
            <c:if test="${pageBean.pageNum<pageBean.pages }">
                <a href="${pageContext.request.contextPath }/profileservlet?method=listProfile&pageNum=${pageBean.pageNum+1}&pageSize=${pageBean.pageSize}" aria-label="Next"><span aria-hidden="true">下一页</span></a>
            </c:if>
            共${pageBean.pages}页&nbsp;&nbsp;
            跳转到
            <select name="page" id="page" onchange="change();">
                <option value="#">请选择</option>
            </select>
        </c:if>
    </table>
    <script type="text/javascript">
        $(function () {
            for (let i = 1;i <= ${pageBean.pages};i++){
                $("#page").append("<option value='"+i+"'>"+i+"</option>");
            }
        })();

        function change() {
            let page = document.getElementById("page");
            $(location).attr("href","profileservlet?method=listProfile&pageNum="+page.value);
        }
    </script>
</body>
</html>
